<%--
  Created by IntelliJ IDEA.
  User: SXT
  Date: 2020/6/29
  Time: 11:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单管理页面</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <%--引入easyui主题的css样式--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--引入easyui中图标集的css样式--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--引入demo.css--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--引入jq中js文件  注意：先引入jq中js在引入easyui中js--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <%--引入easyui中核心js文件--%>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

          $(function () {
              $('#dg').datagrid({
                  url:'MenuController/findAllMenuLer',
                  pagination:true,//设置分页栏展示
                  rownumbers:true,//设置行号显示
                  pageSize:5,//设置size的初始大小
                  pageList:[5,10,15,20],// 设置每一页显示条数列表
                  toolbar:"#tb",
                  columns:[[
                      {field:'mid',title:'菜单ID',width:150,align:'center'},
                      {field:'mname',title:'菜单名称',width:150,align:'center'},
                      {field:'url',title:'菜单URL',width:150,align:'center'},
                      {field:'mdesc',title:'菜单描述',width:150,align:'center'}
                  ]]
              });
          })

        function newMenus () {
            //打开对话框
            $("#dlg").dialog("open").dialog("setTitle","New Menus");
            //清空表单残数据
            $("#fm").form("clear");
            //给用来接收id的input赋一个初始值
            $("#pid").val(0);
            //给提示赋予初始值
            $("#pid_name").text("默认添加一级菜单");

        }
        var url="";
        function checkPid() {
            //打开对话框
            $("#pid_dlg").dialog("open").dialog("setTitle","Check Pid")
        }

          //在对话框中选择父节点菜单的事件的增加
          $(function () {
              $('#tt').tree({
                  onDblClick: function(node){
                      //获得当前节点的id
                      $("#pid").val(node.id);
                      //把选中的节点名称赋值给span
                      $("#pid_name").text(node.text);
                      //关闭当前对话框
                      $("#pid_dlg").dialog("close");
                  }
              });
              url="MenuController/addMenuLer";
          })

        function saveMenu() {
            $.post(url,$("#fm").serialize(),function (result) {
                if (result>0){
                    //关闭对话框
                    $("#dlg").dialog("close");
                    //重新加载数据网格
                    $("#dg").datagrid("reload");
                    //因为树形是页面刚加载的时候就查好的,如果不加载数据网格的话,刚加入的菜单就无法展示
                    //所以要重新加载树形,将刚添加的菜单给展示在对话框里
                    $("#tt").tree("reload")
                }else {
                    $.messager.alert("错误","操作失败","error");
                }
            })
        }

        function editMenus() {
            var  row=$("#dg").datagrid("getSelected");
            if (row!=null){
                //打开对话框
                $("#dlg").dialog("open");
                //数据回显
                $("#fm").form("load",row);
                //给父节点设置默认值
                $("#pid_name").text("默认为当前父节点");
                url="MenuController/changeMenuLer?mid="+row.mid;
            }else {
                $.messager.alert("提示","请选择需要修改的数据","info")
            }
        }

        function removeMenus() {
            var  row=$("#dg").datagrid("getSelected");
            if (row!=null){
                $.messager.confirm("提示","是否删除该数据",function (f) {
                    if (f){
                        $.post("MenuController/removeMenuLer?mid="+row.mid,function (result) {
                            if (result>0){
                                //重新加载数据网格
                                $("#dg").datagrid("reload");
                            }else {
                                if (result<0){
                                    $.messager.alert("提示","此菜单不能删除","info");
                                }else {
                                    $.messager.alert("错误","删除失败","error");
                                }
                            }
                        })
                    }
                })
            }else {
                $.messager.alert("提示","请选择需要删除的数据","info");
            }
        }
    </script>

</head>
<body>

<div style="width: 800px;height: 600px" class="easyui-panel" title="菜单管理">

    <div style="width: 750px;height: 400px;border: 0px solid red;margin: 0px auto;margin-top: 30px">

        <table id="dg" style="width: 750px;height: 400px"></table>

        <%--工具栏设置--%>
        <div id="tb">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newMenus()">添加菜单</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editMenus()">编辑菜单</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeMenus()">删除菜单</a>
        </div>
    </div>


    <%--添加菜单对话框的展示--%>
    <div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <h3>Menu  Information</h3>
            <div style="margin-bottom:10px">
                <input name="mname" class="easyui-textbox" required="true" label="菜单名称:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                父节点选择: <a href="javascript:void(0)" onclick="checkPid()" class="easyui-linkbutton c6" iconCls="icon-reload" style="width:90px">check</a>

                <span id="pid_name">默认添加一级菜单</span>
                <input type="hidden" name="pid"  id="pid"/>
            </div>
            <div style="margin-bottom:10px">
               是否打开：
                <input class="easyui-radiobutton" name="status" value="1" label="是:">

                <input class="easyui-radiobutton" name="status" value="0" label="否:">
            </div>
            <div style="margin-bottom:10px">
                <input name="url" class="easyui-textbox" required="true" label="菜单地址:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="mdesc" class="easyui-textbox" required="true" label="菜单描述:" style="width:100%">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveMenu()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>

    <%--父节点选择的对话框--%>
    <div id="pid_dlg" class="easyui-dialog" style="width:400px;height: 500px" data-options="closed:true,modal:true,border:'thin'">

        <ul id="tt" class="easyui-tree"
            url="MenuController/findAllMenuLer2">
        </ul>

    </div>

</body>

</html>
